এইচটিএমএল ফর্ম (HTML Form)

এক নজরে পরিচ্ছেদ

kt_satt_skill_example_id=1591

এইচটিএমএল < form > এলিমেন্ট

ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়।

একটি এইচটিএমএল ফর্মকে < form > এলিমেন্ট দিয়ে ডিফাইন করা হয়।

kt_satt_skill_example_id=1592

ফর্ম এলিমেন্ট বিভিন্ন ধরনের হয়ে থাকে। যেমনঃ ইনপুট এলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।

ফর্ম <input> এলিমেন্ট

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত হচ্ছে < input > এলিমেন্ট। আমরা < input > এলিমেন্টে type এট্রিবিউট ব্যবহারের মাধ্যমে < input > এলিমেন্টকে বিভিন্ন প্রয়োজনে ব্যবহার করতে পারি।

এই টিউটোরিয়ালে আমরা type এট্রিবিউটে নিম্নের তিনটি ভ্যালুর ব্যবহার দেখবোঃ

ফর্ম text টাইপ ইনপুট

এক লাইনের একটি বক্সের মাধ্যমে তথ্য সংগ্রহের জন্য < input type="text" > ডিফাইন করতে হয়ঃ

kt_satt_skill_example_id=1596

পরামর্শঃ টেক্সট ইনপু্টের ডিফল্ট দৈর্ঘ্য ২০ ক্যারেক্টারের বেশি হয় না।

ফর্ম radio টাইপ ইনপুট

ইনপুট এলিমেন্ট দ্বারা রেডিও টাইপ বাটন তৈরি করার জন্য < input type="radio" > ডিফাইন করতে হয়।

kt_satt_skill_example_id=1599

ফর্ম submit টাইপ ইনপুট

সার্ভারে তথ্য প্রেরনের জন্য সাবমিট বাটন তৈরি করতে  < input type="submit" > ডিফাইন করতে হয়।

kt_satt_skill_example_id=1600

ফর্ম action এট্রিবিউট

সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি তার কার্য সম্পাদন করে। সাবমিট বাটনে ক্লিকের মাধ্যমে ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে সাবমিট করা হয়।

নিম্নে একটি ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1603

ফর্ম method এট্রিবিউট

ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড GET অথবা POST ব্যবহার হয়। নিম্নে ফর্মে মেথড এট্রিবিউট ডিফাইন করা হলঃ

kt_satt_skill_example_id=1604

অথবাঃ

kt_satt_skill_example_id=1605

কখন get ব্যবহার করবো?

ডিফল্টভাবে আপনি get মেথড ব্যবহার করতে পারেন। তবে ফর্মের তথ্য যদি সেন্সিটিভ(ইউজারের নাম অথবা পাসওয়ার্ড) হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত না। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবেঃ

kt_satt_skill_example_id=1607

কখন post ব্যবহার করবো?

আপনার ফর্মের তথ্য যদি সেন্সিটিভ হয় সেক্ষেত্রে অবশ্যই আপনার post মেথড ব্যবহার করা উচিত। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবে নাঃ

kt_satt_skill_example_id=1609

ফর্ম name এট্রিবিউট

প্রতিটি ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করার জন্য অবশ্যই name এট্রিবিউটটি সঠিক ভাবে ব্যবহার করতে হবে। কারণ name এট্রিবিউট ব্যাতিত সার্ভার আপনার প্রেরিত তথ্য গ্রহন করতে পারবে না।

নিম্নের উদাহরণে ফর্ম সাবমিট করার পর "প্রথম নাম" ইনপুট ফিল্ডের তথ্য সার্ভার গ্রহন করবেঃ

kt_satt_skill_example_id=1621

ফর্ম <fieldset> এর মাধ্যমে ফর্মের তথ্য বিন্যাস

ফর্মের তথ্যকে বিভিন্ন ভাগে বিভক্ত করার জন্য <fieldset> এলিমেন্ট ব্যবহার করা হয় এবং <fieldset> এলিমেন্টের মধ্যে <legend> এলিমেন্ট ব্যবহারের মাধ্যমে একটি ক্যাপশন বা শিরোনাম নির্ধারণ করা যায়

kt_satt_skill_example_id=1623

এইচটিএমএল ফর্ম এট্রিবিউট

নিম্নে ফর্মের সকল সম্ভাব্য এট্রিবিউটের সেটসহ একটি এইচটিএমএল < form > এলিমেন্ট দেখানো হলোঃ

shortcode

নিন্মে < form > এলিমেন্টের এট্রিবিউট সমুহের তালিকা দেওয়া হলোঃ